<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="multidevice_setup_browser_proxy.html">
<link rel="import" href="multidevice_setup_shared_css.html">
<link rel="import" href="ui_page.html">
<link rel="import" href="ui_page_container_behavior.html">
<link rel="import" href="../../../html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">

<dom-module id="setup-succeeded-page">
  <template>
    <style include="multidevice-setup-shared">
      #page-icon-container {
        align-items: center;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
      }

      img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
      }
    </style>
    <ui-page header-text="[[i18nDynamic(locale, 'setupSucceededPageHeader')]]"
        icon-name="google-g">
      <span slot="message" inner-h-t-m-l="[[getMessageHtml_()]]"></span>
      <div id="page-icon-container" slot="additional-content">
        <iron-media-query query="(prefers-color-scheme: dark)"
            query-matches="{{isDarkModeActive_}}">
        </iron-media-query>
        <img id="success-img" aria-hidden="true"
            srcset="[[getImageSrcSet_(isDarkModeActive_)]]">
      </div>
    </ui-page>
  </template>
  <script src="setup_succeeded_page.js"></script>
</dom-module>
